<script setup lang="ts">
import { ref } from 'vue';

const modalVisible = ref(false)
const refundModalVisible = ref(false)

const dataList = ref<any>([
  {
    quantity: "50",
    productName: "50元入场券抢占价值1980元八重豪礼+4节课（限新生体验）",
    amount: "199.00",
    verifier: "谭小玲",
    verifiedAt: "2025-05-02 19:34:35"
  },
  {
    quantity: "50",
    productName: "50元入场券抢占价值1980元八重豪礼+4节课（限新生体验）",
    amount: "199.00",
    verifier: "谭小玲",
    verifiedAt: "2025-05-02 19:34:35"
  }, {
    quantity: "50",
    productName: "50元入场券抢占价值1980元八重豪礼+4节课（限新生体验）",
    amount: "199.00",
    verifier: "谭小玲",
    verifiedAt: "2025-05-02 19:34:35"
  }
]);
</script>

<template>
  <umrp-container padding="16px" height="100%" bg-color="gray" :gap="16">
    <umrp-breadcrumb :items="['订单管理', '订单列表', '订单详情']"></umrp-breadcrumb>
    <umrp-card title="订单信息" :border="false">
      <template #extra>
        <umrp-space :size="6">
          <umrp-button type="primary" @click="refundModalVisible = true">退款</umrp-button>
          <umrp-button type="primary">返回</umrp-button>
        </umrp-space>
      </template>
      <umrp-descriptions>
        <umrp-descriptions-item label="微信昵称">Jamie Dimon💯 😊</umrp-descriptions-item>
        <umrp-descriptions-item label="手机号码">17727624776</umrp-descriptions-item>
        <umrp-descriptions-item label="订单状态">待使用</umrp-descriptions-item>
        <umrp-descriptions-item label="订单编码">32742501</umrp-descriptions-item>
        <umrp-descriptions-item label="下单时间">2025-05-02 19:34:35</umrp-descriptions-item>
        <umrp-descriptions-item label="付款时间">2025-05-02 19:34:35</umrp-descriptions-item>
        <umrp-descriptions-item label="支付单号">30724569</umrp-descriptions-item>
      </umrp-descriptions>
    </umrp-card>
    <umrp-card :border="false" title="商品信息">
      <umrp-table :data="dataList" :pagination="false">
        <template #columns>
          <umrp-table-column title="商品头图" slot-name="cover"></umrp-table-column>
          <umrp-table-column title="商品名称" data-index="productName"></umrp-table-column>
          <umrp-table-column title="商品数量" data-index="quantity"></umrp-table-column>
          <umrp-table-column title="支付金额" data-index="amount"></umrp-table-column>
          <umrp-table-column title="核销人" data-index="verifier"></umrp-table-column>
          <umrp-table-column title="核销时间" data-index="verifiedAt"></umrp-table-column>
          <umrp-table-column title="操作" slot-name="action"></umrp-table-column>
        </template>
        <template #cover>
          <umrp-image :width="50" :height="50"></umrp-image>
        </template>
        <template #action>
          <umrp-button type="primary" @click="modalVisible = true">核销</umrp-button>
        </template>
      </umrp-table>
    </umrp-card>
    <umrp-modal :visible="modalVisible">
      <umrp-form>
        <umrp-form-item label="核销码">
          <umrp-input placeholder="请输入核销码"></umrp-input>
        </umrp-form-item>
      </umrp-form>
    </umrp-modal>
    <umrp-modal :visible="refundModalVisible">
      <umrp-text>您确认退款？</umrp-text>
    </umrp-modal>
  </umrp-container>
</template>